<template>
    <div>
        <div class="recommend-title">周末去哪</div>
        <ul>
            <li class="item" v-for="item of list" :key="item.id">
                <div class="item-img-wrapper">
                    <img class="item-img" :src="item.imgUrl" alt="">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  },
  data(){
      return {
          // recommendList: [{
          //     id: '0001',
          //     imgUrl: 'http://img1.qunarzz.com/sight/source/1507/42/c37e1566b933d1.jpg_r_640x214_6a0b0c3f.jpg',
          //     title: '天津海昌极地海洋公园',
          //     desc: '浪漫天津首站，浪漫主题海洋公园'
          // },{
          //     id: '0002',
          //     imgUrl: 'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
          //     title: '京城有好泉',
          //     desc: '细数北京温泉，温暖你的冬天'             
          // },{
          //     id: '0003',
          //     imgUrl: 'http://img1.qunarzz.com/sight/source/1505/7d/df6ff468331c43.jpg_r_640x214_1f3783d0.jpg',
          //     title: '上海必打卡',
          //     desc: '黄浦江畔顶尖夜景享受'
          // }]
      }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/styles/mixins.styl';

.recommend-title {
  line-height: 0.8rem;
  background-color: #eee;
  text-indent: 0.2rem;
}

.item-img-wrapper {
  overflow: hidden;
  height: 0;
  padding-bottom: 33.9%;
}

.item-img {
  width: 100%;
  padding: 0.1rem;
}

.item-info {
  padding: 0.1rem;
}

.item-title {
  line-height: 0.54rem;
  font-size: 0.32rem;
  ellipsis();
}

.item-desc {
  line-height: 0.44rem;
  font-size: 0.28rem;
  color: #ccc;
  ellipsis();
}
</style>